<template>
  <div
    v-show="visible"
    ref="barRef"
    class="hover-bar"
    :style="{ top: `${top}px`, left: `${left}px` }"
  >
    <el-button @click="toggleAnnotation" title="标注">
      <el-icon><Brush /></el-icon>
    </el-button>
    <el-color-picker
      v-model="textColor"
      size="small"
      show-alpha
      :predefine="predefineColors"
      @change="setTextColor"
    >
      <el-button title="文字颜色">
        <el-icon><Brush /></el-icon>
      </el-button>
    </el-color-picker>

    <el-color-picker
      v-model="backgroundColor"
      size="small"
      show-alpha
      :predefine="predefineColors"
      @change="setBackgroundColor"
    >
      <el-button title="背景颜色">
        <el-icon><PictureFilled /></el-icon>
      </el-button>
    </el-color-picker>

    <div
      v-if="isAnnotating"
      class="annotation-input"
      :style="{ top: `${top + 20}px`, left: `${left}px` }"
    >
      <el-input
        type="textarea"
        v-model="annotationText"
        placeholder="输入标注内容..."
        @blur="saveAnnotation"
        style="height: 50px"
      ></el-input>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Brush, PictureFilled } from "@element-plus/icons-vue";

const visible = ref(false);
const top = ref(0);
const left = ref(0);
const textColor = ref("");
const backgroundColor = ref("");
const savedRange = ref<Range | null>(null);
const annotationText = ref("");
const isAnnotating = ref(false);

const predefineColors = [
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#00ced1",
  "#1e90ff",
  "#c71585",
  "#000000",
  "#ffffff",
];

const emit = defineEmits<{
  (e: "setTextColor", color: string): void;
  (e: "setBackgroundColor", color: string): void;
}>();

const setTextColor = (color: string | null) => {
  if (color && savedRange.value) {
    const selection = window.getSelection();
    selection?.removeAllRanges();
    selection?.addRange(savedRange.value);
    emit("setTextColor", color);
  }
};

const setBackgroundColor = (color: string | null) => {
  if (color && savedRange.value) {
    const selection = window.getSelection();
    selection?.removeAllRanges();
    selection?.addRange(savedRange.value);
    emit("setBackgroundColor", color);
  }
};

const toggleAnnotation = () => {
  isAnnotating.value = true;
  // 清空之前的标注文本
  annotationText.value = "";
  visible.value = false; // 隐藏 HoverBar
};

const saveAnnotation = () => {
  if (savedRange.value && annotationText.value) {
    const selection = window.getSelection();
    selection?.removeAllRanges();
    selection?.addRange(savedRange.value);

    // 在选中的内容上添加标注
    const span = document.createElement("span");
    span.style.backgroundColor = "yellow"; // 默认背景颜色
    span.title = annotationText.value; // 鼠标移入时显示的内容
    span.textContent = savedRange.value.toString(); // 被标注的内容

    // 替换选中的内容
    savedRange.value.deleteContents();
    savedRange.value.insertNode(span);

    // 清空状态
    savedRange.value = null;
    isAnnotating.value = false;
  }
};

const updatePosition = (range: Range) => {
  const rect = range.getBoundingClientRect();
  top.value = rect.bottom + window.scrollY; // 设置为选中内容的底部
  left.value = rect.left + window.scrollX; // 设置为选中内容的左侧
  visible.value = true;
  savedRange.value = range.cloneRange();
};

const hide = () => {
  visible.value = false; // 隐藏 HoverBar
};

defineExpose({
  updatePosition,
  hide,
});
</script>

<style scoped>
.hover-bar {
  z-index: 1000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid var(--el-border-color-light);
  @apply fixed  flex gap-2 p-2 bg-white border  rounded-md;
}

.annotation-input {
  @apply flex flex-col;
}

.annotation-input textarea {
  @apply w-48 h-12;
}
</style>
